<!--主页布局-->
<template>
  <el-header>
    <div class="el-logo">
      <h1>Cesium</h1>
    </div>
    <div class="el-menu-box">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
        :router="false"
      >
        <el-menu-item index="/libs">
          <template #title>组件</template>
        </el-menu-item>
        <el-menu-item index="/donate">
          <template #title>赞助</template>
        </el-menu-item>
        <el-menu-item index="/discuss">
          <template #title>讨论</template>
        </el-menu-item>

        <el-sub-menu index="/navigate">
          <template #title>站点导航</template>
          <el-menu-item
            v-for="(item, index) in navList"
            :key="index"
            :index="item.path"
          >
            <span>{{ item.name }}</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </el-header>
</template>
<script>
export default {
  data() {
    return {
      query: null,
      activeIndex: '/index',
      navList: [
        {
          name: '稀土掘金',
          path: 'https://juejin.cn/',
        },
        {
          name: 'GitHub',
          path: 'https://github.com/',
        },
        {
          name: 'Gitee',
          path: 'https://gitee.com/',
        },
        {
          name: 'Can I Use',
          path: 'https://caniuse.com/',
        },
      ],
    }
  },
  methods: {
    handleSelect(val) {
      let arr = ['#/libs', '#/donate']
      if (/^https/.test(val)) {
        window.open(val, '_blank')
        return
      }
      let { href } = this.$router.resolve({
        path: val,
      })
      if (arr.indexOf(href) > -1) {
        this.$router.push(val)
        this.activeIndex = val
      } else {
        window.open(href, '_blank')
      }
    },
    getCurrent() {
      let route = this.$route
      let str = route.path.match(/^(\S*)\//)[1]
      this.activeIndex = str ? str : route.path
      console.log(this.activeIndex)
    },
  },
  created() {
    this.getCurrent()
  },
}
</script>
<style lang="scss" scoped>
.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0 0 1px 1px rgba(68, 66, 66, 0.15);
  padding: 0 32px;
}

.el-logo {
  h1 {
    color: #de4a4a;
    margin: 0;
    font-size: 32px;
  }
}

.el-menu-box {
  display: flex;
  align-items: center;
  flex: 1;

  .el-menu {
    background: #fff;

    .el-menu-item,
    :deep(.el-sub-menu__title) {
      font-size: 17px;
      letter-spacing: 0.5px;
      font-family: cursive;
      font-weight: 500;
    }

    .el-menu-item.is-active {
      border-bottom: 2px solid #fff;
      color: #de4a4a !important;
    }

    .el-menu-item {
      &:hover,
      &:focus {
        color: #000 !important;
      }
    }

    .el-menu--popup .el-menu-item {
      font-size: 14px;
    }
  }
}

.el-menu {
  height: 60px;
  border: none;
  flex: 1;
  justify-content: end;
  margin-right: 20px;
}
</style>
